<html>  
    <head>
        <style>
        .my-fancy-item{
            color: red;
        }
        </style>
    </head>
    <body>
        <script src="vue.js"></script>
        <div id="app" v-bind:title="message">
            <p>{{ message }}</p>
            <p v-if="screen">ssssddffffft5ttgtggrfrefeded</p>
            <ol>
                <!--<li >{{ii.text}}</li>-->
                <li-rr v-for="ii in todos" v-bind:name="ii"></li-rr>
            </ol>
            <input type="text" v-model="name" />
            <p>输入是：{{name}}</p>
            <button v-on:click="ddd">点我</button>
            <p>{{ff}}</p>
<my-awesome-list :items="todos">
  <!-- 作用域插槽也可以在这里命名 -->
  <template slot="item" scope="props">
    <li class="my-fancy-item">{{ props.text }}</li>
  </template>
</my-awesome-list>
           <component v-bind:is="currentView">
  <!-- 组件在 vm.currentview 变化时改变！ -->
</component>

        </div>
        <script>
            Vue.component("li-rr",{
                template:"<li>rrrr+{{name.text}}</li>",
                props:["name"]
            }
            );
            Vue.component("my-awesome-list",{
                template:`
                 <ul>
  <slot name="item"
    v-for="item in items"
    :text="item.text">
    <!-- fallback content here -->
  </slot>
</ul>`,
props:["items"]
            })
            var data={
                    message:"Hello JS",
                    screen:true,
                    todos: [
                        { text: 'Learn JavaScript' },
                        { text: 'Learn Vue' },
                        { text: 'Build something awesome' }
                    ],
                    name:'',
                };
           var b= new Vue({
                el:"#app",
                data:data,
                methods:{
                    ddd:function(){
                        this.todos.pop();
                    }
                },
                created:function(data){
                    console.log(data);

                },
                computed:{
                    ff:function(){
                        return this.message+this.screen;
                    }
                }
            });
            var demo=new Vue({
                data:{
                    text:"11",
                }
                
            })
           
        </script>
    </body>
</html>